<template>
    <el-breadcrumb separator="💖">
        <el-breadcrumb-item v-for="(item, index) of breadcrumbList" :key="index">
            <span v-if="index === breadcrumbList.length - 1" class="no-redirect" :class="store.theme">{{ item.name
            }}</span>
            <span v-else class="redirect" :class="store.theme">{{ item.name
            }}</span>
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script setup>
import { watch, ref } from "vue";
import { useWebStore } from "../../store/webStore";
import { useRoute, useRouter } from 'vue-router'
const route = useRoute();
const router = useRouter()
const store = useWebStore()

const breadcrumbList = ref([])

const initBreadcrumbList = () => {
    breadcrumbList.value = route.matched
}

watch(route, () => {
    initBreadcrumbList()
}, { deep: true, immediate: true })

</script>

<style lang='scss' scoped>
.no-redirect {
    color: #333;
    font-weight: 600;
    cursor: text;

    &.dark {
        color: #eee;
    }
}

.redirect {
    color: #444;
    cursor: pointer;

    &.dark {
        color: #999;
    }
}
</style>